15. JSON и Задания с использованием localStorage

JSON (JavaScript Object Notation) — это текстовый формат для обмена данными, который широко используется в веб-разработке. Он простой, читаемый человеком и компьютером, что делает его удобным для передачи данных между клиентом (браузером) и сервером.

Основные особенности JSON:

  1. Структурированный формат: JSON состоит из пар "ключ-значение", которые заключены в фигурные скобки {}.
  2. Поддержка различных типов данных:
    • Строки ("string")
    • Числа (123, 3.14)
    • Булевы значения (true, false)
    • Массивы ([1, 2, 3])
    • Объекты ({"key": "value"})
    • Значение null
  3. Текстовый формат: JSON представлен как текст, поэтому его легко сохранять в файлах или передавать по сети.

Пример JSON

{
  "name": "Иван",
  "age": 30,
  "isMarried": false,
  "children": ["Аня", "Сергей"],
  "address": {
    "city": "Москва",
    "postalCode": "101000"
  }
}

Как JSON работает в JavaScript

  1. Сериализация объектов в строку JSON
    Для передачи данных (например, на сервер) объект преобразуется в строку формата JSON с помощью функции JSON.stringify.

  2. Десериализация строки JSON в объект
    Чтобы работать с данными, полученными в формате JSON (например, с сервера), строка JSON преобразуется обратно в объект с помощью функции JSON.parse.

Примеры работы с JSON в JavaScript

Преобразование объекта в JSON (сериализация)

const user = {
  name: "Иван",
  age: 30,
  isMarried: false
};

const jsonString = JSON.stringify(user);
console.log(jsonString); 
// Результат: {"name":"Иван","age":30,"isMarried":false}

Преобразование JSON в объект (десериализация)

const jsonString = '{"name":"Иван","age":30,"isMarried":false}';
const user = JSON.parse(jsonString);

console.log(user.name); 
// Результат: Иван

Использование JSON с localStorage

Сохранение объекта в localStorage

const user = {
  name: "Иван",
  age: 30
};

// Сохранение
localStorage.setItem('user', JSON.stringify(user));

Получение объекта из localStorage

const userJSON = localStorage.getItem('user');
if (userJSON) {
  const user = JSON.parse(userJSON);
  console.log(user.name); 
  // Результат: Иван
}

Преимущества JSON:

  1. Простота использования.
  2. Совместимость с большинством языков программирования.
  3. Поддержка вложенных структур данных.

JSON часто используется в REST API, работе с хранилищами (localStorage, sessionStorage) и для передачи данных через HTTP-запросы.

Задания

Задание 1: Сохранение текстового поля

  1. Создайте HTML-страницу с текстовым полем и кнопкой.
  2. При нажатии на кнопку текст из поля должен сохраняться в localStorage.
  3. При загрузке страницы проверьте, есть ли данные в localStorage. Если есть, заполните текстовое поле сохранённым значением.

Задание 2: Счётчик посещений страницы

  1. Создайте страницу, которая отображает, сколько раз пользователь её открыл.
  2. Для этого храните значение счётчика в localStorage и увеличивайте его при каждом открытии страницы.
  3. Показывайте текущее значение счётчика на экране.

Задание 3: Настройка темы сайта

  1. Создайте страницу с переключателем (например, кнопка или чекбокс) для выбора тёмной или светлой темы.
  2. Выбранная тема должна сохраняться в localStorage.
  3. При загрузке страницы проверяйте localStorage и применяйте сохранённую тему.

Задание 4: Управление списком задач

  1. Создайте страницу с полем ввода для добавления задач и списком задач.
  2. Позволяйте пользователю добавлять новые задачи, удалять их или отмечать как выполненные.
  3. Сохраняйте весь список задач в localStorage и восстанавливайте его при загрузке страницы.

Задание 5: Онлайн-опрос

  1. Создайте страницу с несколькими вопросами и вариантами ответов (например, радиокнопки).
  2. Сохраняйте ответы пользователя в localStorage при их выборе.
  3. Если пользователь возвращается на страницу, показывайте уже выбранные им ответы.

Задание 6: Сохранение корзины покупок

  1. Создайте страницу с несколькими товарами и кнопкой "Добавить в корзину" для каждого товара.
  2. Сохраняйте выбранные товары в localStorage.
  3. Сделайте отдельный раздел страницы для просмотра товаров, добавленных в корзину, который заполняется данными из localStorage.

Задание 7: Пользовательский профиль

  1. Создайте форму с полями: имя, возраст, электронная почта.
  2. После заполнения формы сохраняйте введённые данные в localStorage.
  3. При загрузке страницы показывайте данные профиля, если они уже сохранены.